import { Button, TextField } from "@mui/material";
import React from "react";
import "./index.less";

const Type2Type: KeyMap = {
  fill: "填空",
  code: "编程",
  qa: "问答",
};

interface IProp {
  data: IQuestionType;
}

export default function Fill({ data }: IProp) {
  return (
    <div className="fill">
      <section className="top">
        <div className="type">{Type2Type[data.questionType]}</div>
        <div className="title">{data.title}</div>
      </section>
      {/* react 里面 实现v-html 的效果，就是下面这样的 */}
      <section dangerouslySetInnerHTML={{ __html: data.content }}></section>
      <section className="user-answer">
        <TextField multiline rows={5} fullWidth placeholder="请输入答案" />
      </section>
      <section className="anser-arear">
        <div>
          <Button variant="outlined">确定</Button>
        </div>
        <div>
          <p>参考答案</p>
          <div dangerouslySetInnerHTML={{ __html: data.answer }}></div>
        </div>
      </section>
    </div>
  );
}
